<template>
  <el-main v-loading="loading" :element-loading-text="$t('msg_syn')" element-loading-background="rgba(0, 0, 0, 0.6)" class="el-mainContent height100  setting config">
    <el-form label-position="top" label-width="120px" size="small" class="demo-form-inline   content  ">
      <el-row > 
      <p class="  smallHeader el-divider-bottom">{{$t('hxImConfig')}}</p>
        </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="ORG_NAME：">
            <el-input v-model="detail.org_name" placeholder="ORG_NAME："></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="6">
          <el-form-item label="APP_NAME：">
            <el-input v-model="detail.app_name" placeholder="APP_NAME："></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="CLIENT_ID：">
            <el-input v-model="detail.client_id" placeholder="CLIENT_ID："></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="6">
          <el-form-item label="CLIENT_SECRET：">
            <el-input v-model="detail.client_secret" placeholder="CLIENT_SECRET："></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="GRANT_TYPE：">
            <el-input v-model="detail.grant_type" placeholder="GRANT_TYPE："></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="6">
          <el-form-item label="APP_KEY：">
            <el-input v-model="detail.app_key" placeholder="APP_KEY："></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="">
      <a href="https://console.easemob.com/index.html#/login?_k=fgh8ly" class="a-btn" >{{$t('hx_manage')}}</a>
      <el-button @click="userstohxBtnClick" size="small" type="primary" plain>{{$t('userstohx')}}</el-button>
    </div>
  </el-main>
</template>

<script>


export default {
  data(){
    return {
      loading:false,

    }
  },
  props:["detail"],
  watch:{
    detail(newVal){
      this.detail=newVal;
    }
  },
  created() {
  },
  methods: {
    userstohxBtnClick(){
      this.loading=true;
      this.$api.userstohx({
        onSucess:resp =>{
          if(resp.data.errcode==0){
            this.$message({
              showClose: true,
              message: this.$t('msg_syn_succeed'),
              type: "success"
            });
            this.loading=false;
          }else{
            this.$message({
              showClose: true,
              message: resp.data.errmsg,
              type: "error"
            });
            this.loading=false;

          }
        },
        onError:function(){

        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>

</style>